<template>
  <div v-if="visible" class="edit-modal-overlay" @click="closeModal">
    <div class="edit-modal" @click.stop>
      <div class="modal-header">
        <h3>{{ getModalTitle() }}</h3>
        <button class="close-btn" @click="closeModal">×</button>
      </div>
      <div class="modal-content">
        <div class="edit-section">
          <label class="section-label">{{ getContentLabel() }}</label>
          <div class="editor-container">
            <!-- 语法示例区域 -->
            <div v-if="showSyntaxExample" class="syntax-example-panel">
              <div class="example-header">
                <h4>{{ getExampleTitle() }}</h4>
              </div>
              <div class="example-content">
                <pre>{{ getSyntaxExample() }}</pre>
              </div>
            </div>
            <!-- 编辑器区域 -->
            <div ref="editorContainer" class="codemirror-editor"></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" @click="closeModal">取消</button>
        <button class="btn btn-primary" @click="saveContent">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import { EditorView, keymap } from '@codemirror/view'
import { EditorState } from '@codemirror/state'
import { markdown } from '@codemirror/lang-markdown'
import { defaultKeymap } from '@codemirror/commands'
import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language'
import { javascript } from '@codemirror/lang-javascript'
import { python } from '@codemirror/lang-python'
import { html } from '@codemirror/lang-html'
import { css } from '@codemirror/lang-css'
import { json } from '@codemirror/lang-json'
import { sql } from '@codemirror/lang-sql'
import { getSyntaxExample, getExampleTitle, hasSyntaxExample } from '../utils/syntaxExamples'

export default {
  name: 'EditModal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    },
    componentType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      editContent: ''
    }
  },
  computed: {
    showSyntaxExample() {
      return hasSyntaxExample(this.componentType)
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.editContent = this.content
        this.$nextTick(() => {
          this.initEditor()
        })
      } else {
        this.destroyEditor()
      }
    },
    content(newVal) {
      if (!this.visible) {
        this.editContent = newVal
      }
    }
  },
  mounted() {
    if (this.visible) {
      this.$nextTick(() => {
        this.initEditor()
      })
    }
  },
  beforeUnmount() {
    this.destroyEditor()
  },
  methods: {
    initEditor() {
      if (this.editor) {
        this.destroyEditor()
      }
      
      const container = this.$refs.editorContainer
      if (!container) return
      
      // 统一使用markdown语法高亮，支持代码块内的语法高亮
      const state = EditorState.create({
        doc: this.editContent,
        extensions: [
          EditorView.lineWrapping,
          syntaxHighlighting(defaultHighlightStyle),
          markdown({
             codeLanguages: [
               { name: 'javascript', alias: ['js'], load: () => javascript() },
               { name: 'sql', alias: [], load: () => sql() },
               { name: 'python', alias: ['py'], load: () => python() },
               { name: 'html', alias: [], load: () => html() },
               { name: 'css', alias: [], load: () => css() },
               { name: 'json', alias: [], load: () => json() }
             ]
           }),
          keymap.of([...defaultKeymap]),
          EditorView.updateListener.of(update => {
            if (update.docChanged) {
              this.editContent = update.state.doc.toString()
            }
          })
        ]
      })
      
      this.editor = new EditorView({
        state,
        parent: container
      })
    },
    
    destroyEditor() {
      if (this.editor) {
        this.editor.destroy()
        this.editor = null
      }
    },
    
    closeModal() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    
    saveContent() {
      if (this.editor) {
        this.editContent = this.editor.state.doc.toString()
      }
      this.$emit('save', this.editContent)
      this.closeModal()
    },
    
    getModalTitle() {
      const typeMap = {
        'mermaid': '编辑 Mermaid 图表',
        'echarts': '编辑 ECharts 图表',
        'dataset': '编辑数据集',
        'code': '编辑代码块',
        'container': '编辑容器内容',
        'h1': '编辑一级标题',
        'h2': '编辑二级标题',
        'h3': '编辑三级标题',
        'h4': '编辑四级标题',
        'h5': '编辑五级标题',
        'h6': '编辑六级标题',
        'p': '编辑段落',
        'ul': '编辑无序列表',
        'ol': '编辑有序列表',
        'blockquote': '编辑引用块',
        'table': '编辑表格'
      }
      return typeMap[this.componentType] || '编辑组件'
    },
    
    getContentLabel() {
      const typeMap = {
        'mermaid': 'Mermaid 代码：',
        'echarts': 'ECharts 配置：',
        'dataset': '数据集内容：',
        'code': '代码内容：',
        'container': '容器内容：',
        'h1': '标题内容：',
        'h2': '标题内容：',
        'h3': '标题内容：',
        'h4': '标题内容：',
        'h5': '标题内容：',
        'h6': '标题内容：',
        'p': '段落内容：',
        'ul': '列表内容：',
        'ol': '列表内容：',
        'blockquote': '引用内容：',
        'table': '表格内容：'
      }
      return typeMap[this.componentType] || '组件内容：'
    },
    
    // 语法示例相关方法
    getSyntaxExample() {
      return getSyntaxExample(this.componentType)
    },
    
    getExampleTitle() {
      return getExampleTitle(this.componentType)
    }
  }
}
</script>

<style scoped>
.edit-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.edit-modal {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 1000px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #333;
}

.modal-content {
  flex: 1;
  padding: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.edit-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.section-label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  flex-shrink: 0;
}

.editor-container {
  flex: 1;
  display: flex;
  gap: 16px;
  min-height: 0;
}

.syntax-example-panel {
  width: 300px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  min-height: 0;
}

.example-header {
  padding: 12px 16px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.example-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
}

.example-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.example-content pre {
  flex: 1;
  background-color: #f1f3f4;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 12px;
  margin: 0;
  overflow: auto;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: #333;
  min-height: 0;
}

.codemirror-editor {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: auto;
  min-height: 0;
}

.codemirror-editor :deep(.cm-editor) {
  height: 100%;
  background-color: #fff;
}

.codemirror-editor :deep(.cm-scroller) {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow: auto;
}

.codemirror-editor :deep(.cm-focused) {
  outline: none;
}

.codemirror-editor :deep(.cm-content) {
  color: #333;
}

.codemirror-editor :deep(.cm-gutters) {
  background-color: #f8f9fa;
  border-right: 1px solid #e9ecef;
  color: #6c757d;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
}

.btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #545b62;
}
</style>